<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>天气案例</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
			<h1>今天天气很{{weather}}</h1>
			<!-- 绑定事件时，@xxx="yyy", yyy 可以写简单的语句-->
			<button @click="isHot = !isHot">切换天气</button>
			<button @click="changeWeather">切换天气</button>
    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示

    new Vue({
			el: '#root',
			data: {
				isHot: true,
			},
			computed:{
				weather(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot;
				}
			},
    })
</script>
</html>
